<template>
  <div>
    <!-- 头 -->
    <van-nav-bar :title="title" left-arrow @click-left="$router.back()">
    </van-nav-bar>

    <!-- 筛选 -->
    <van-dropdown-menu>
      <van-dropdown-item title="分类" ref="left">
        <van-tree-select
          :items="items"
          :active-id.sync="activeId"
          :main-active-index.sync="activeIndex"
          @click-item="leftConfirm"
        />
      </van-dropdown-item>
      <van-dropdown-item title="排序" ref="content">
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell
              v-for="item in sortingList"
              :key="item.id"
              :title="item.title"
              :icon="item.icon"
              clickable
              @click="contentConfirm(item.id)"
            >
              <template #right-icon>
                <van-radio :name="item.id" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </van-dropdown-item>
      <van-dropdown-item title="筛选">
        <van-cell title="配送方式">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #label>
            <van-checkbox
              v-model="item.is_solid"
              v-for="item in delivery_modesList"
              :key="item.id"
              :style="{ color: item.color }"
            >
              {{ item.text }}
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                />
              </template>
            </van-checkbox>
          </template>
        </van-cell>

        <van-cell title="商家属性">
          <template #label>
            <van-checkbox-group v-model="result" direction="horizontal">
              <van-checkbox
                :name="item.name"
                v-for="item in activity_attributesList"
                :key="item.id"
              >
                {{ item.name }}</van-checkbox
              >
            </van-checkbox-group>
            <van-button round type="info">清空</van-button>
            <van-button round type="info"
              >确认（{{ result.length }}）</van-button
            >
          </template>
        </van-cell>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 店铺信息 -->
    <merchants
      :arr="item"
      v-for="item in shoppingList"
      :key="item.id"
      :ids="item.id"
    ></merchants>
  </div>
</template>

<script>
import merchants from "@/components/merchants.vue";
import {
  shopping,
  shopping_entry,
  delivery_modes,
  activity_attributes,
} from "@/api/index.js";
export default {
  data() {
    return {
      title: "甜品饮品",
      radio: "4",
      // 分类
      activeId: 0,
      activeIndex: 0,
      items: [],
      delivery_modesList: [],
      activity_attributesList: [],
      // 筛选
      result: [],
      activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
      inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
      shoppingList: [],
      index_entryList: [],
      sortingList: [
        {
          icon: "location-o",
          title: "智能排序",
          id: 4,
        },
        {
          icon: "location-o",
          title: "距离最近",
          id: 5,
        },
        {
          icon: "location-o",
          title: "销量最高",
          id: 6,
        },
        {
          icon: "location-o",
          title: "起送价最低",
          id: 1,
        },
        {
          icon: "location-o",
          title: "配送时间最短",
          id: 2,
        },
        {
          icon: "location-o",
          title: "评分最高",
          id: 3,
        },
      ],
    };
  },
  components: {
    merchants,
  },
  created() {
    shopping_entry().then((res) => {
      this.items = JSON.parse(
        JSON.stringify(res.data).replace(/name/g, "text")
      );
      this.items = JSON.parse(
        JSON.stringify(this.items).replace(/sub_categories/g, "children")
      );
      this.items = JSON.parse(
        JSON.stringify(this.items).replace(/count/g, "badge")
      );
    });
    this.init();
    delivery_modes().then((res) => {
      this.delivery_modesList = res.data;
    });
    activity_attributes().then((res) => {
      this.activity_attributesList = res.data;
      this.activity_attributesList.forEach((item) => {
        this.result.push(item.name);
      });
    });
  },
  methods: {
    init() {
      shopping({
        latitude: "31.22967",
        longitude: "121.4762",
        order_by: this.radio,
        restaurant_category_ids: [this.activeId],
        // delivery_mode,
        // support_ids,
      }).then((res) => {
        this.shoppingList = res.data;
      });
    },
    contentConfirm(index) {
      // console.log(this.$refs.item);
      this.radio = index;
      this.init();
      this.$refs.content.toggle();
    },
    leftConfirm() {
      this.init();
      this.$refs.left.toggle();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-info {
  top: 10px;
  right: -35px;
  background-color: #666;
}
.img-icon {
  width: 20px;
  height: 20px;
}
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
.bule {
  color: blue;
}
.van-button {
  width: 45%;
  margin: 9px;
}
</style>